import * as THREE from '../../build/three.module.js';
import Stats from '../../jsm/libs/stats.module.js';

// 场景
const scene = new THREE.Scene();

// 相机
const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.01, 10);
camera.position.z = 3.5;

// 环境光
scene.add(new THREE.AmbientLight(0x444444));

// 构建几何体
const geometry = new THREE.BufferGeometry(),
      radius = 1, // 半径
      numLat = 100,
      numLng = 200; // 经纬度采样数

const linePositions = new Float32Array(numLat * numLng * 3 * 2); // 顶点位置
const lineColors = new Float32Array(numLat * numLng * 3 * 2); // 顶点颜色
const lineVisible = new Float32Array(numLat * numLng * 2); // 顶点可见性

for(let i = 0; i < numLat; i += 1) {
  for(let j = 0; j < numLng; j += 1) {
    const lat = (Math.random() * Math.PI) / 50.0 + i / numLat * Math.PI;
    const lng = (Math.random() * Math.PI) / 50.0 + j / numLng * Math.PI * 2;

    const index = i * numLng + j;

    // 顶点位置
    linePositions[index * 6 + 0] = 0;
    linePositions[index * 6 + 1] = 0;
    linePositions[index * 6 + 2] = 0; // 顶点1位置
    linePositions[index * 6 + 3] = radius * Math.sin(lat) * Math.cos(lng);
    linePositions[index * 6 + 4] = radius * Math.cos(lat);
    linePositions[index * 6 + 5] = radius * Math.sin(lat) * Math.sin(lng); // 顶点2位置

    // 顶点颜色
    const color = new THREE.Color(0xffffff);

    color.setHSL(lat / Math.PI, 1.0, 0.2);
    lineColors[index * 6 + 0] = color.r;
    lineColors[index * 6 + 1] = color.g;
    lineColors[index * 6 + 2] = color.b; // 顶点1的颜色
    color.setHSL(lat / Math.PI, 1.0, 0.7);
    lineColors[index * 6 + 3] = color.r;
    lineColors[index * 6 + 4] = color.g;
    lineColors[index * 6 + 5] = color.b; // 顶点2颜色

    // 可见性
    lineVisible[index * 2 + 0] = 1.0;
    lineVisible[index * 2 + 1] = 1.0;
  }
}

// 设置几何体属性
geometry.setAttribute('position', new THREE.BufferAttribute(linePositions, 3));
geometry.setAttribute('vertColor', new THREE.BufferAttribute(lineColors, 3));
geometry.setAttribute('visible', new THREE.BufferAttribute(lineVisible, 1));
geometry.computeBoundingSphere();

// 启用着色器材质
const shaderMaterial = new THREE.ShaderMaterial({
  vertexShader: document.getElementById('vertexshader').textContent,
  fragmentShader: document.getElementById('fragmentshader').textContent
});

// 构建网格对象
const mesh = new THREE.LineSegments(geometry, shaderMaterial);
scene.add(mesh);

// 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(devicePixelRatio);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

// 统计
const stats = new Stats();
document.body.appendChild(stats.dom);

// 事件处理函数
// 窗口尺寸变化
const handleWindowResize = () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(innerWidth, innerHeight);
}
// 隐藏按钮点击处理
const handleHideClick = () => {
  for(let i = 0; i < geometry.attributes.visible.array.length; i += 2) {
    if (Math.random() > 0.5) { // 25% 几率
      geometry.attributes.visible.array[i + 0] = 0;
      geometry.attributes.visible.array[i + 1] = 0;
    }
  }
  geometry.attributes.visible.needsUpdate = true;
}
// 显示按钮点击处理
const handleShowClick = () => {
  for(let i = 0; i < geometry.attributes.visible.array.length; i += 2) {
    geometry.attributes.visible.array[i + 0] = 1.0;
    geometry.attributes.visible.array[i + 1] = 1.0;
  }
  geometry.attributes.visible.needsUpdate = true;

}

// 事件绑定
window.addEventListener('resize', handleWindowResize, false);
document.getElementById('hide').addEventListener('click', handleHideClick, false);
document.getElementById('show').addEventListener('click', handleShowClick, false);

// 渲染函数
const animate = (time) => {
  requestAnimationFrame(animate);

  time = Date.now() * 0.01;

  mesh.rotation.x = time * 0.05;
  mesh.rotation.y = time * 0.025;

  stats.update();
  renderer.render(scene, camera);
}
animate();